<script setup>
import {ref} from 'vue'
import { Plus} from '@element-plus/icons-vue'
import {getUserInformationService,updataBaseInformationService} from '@/api/user'
import { useUserStore } from '@/stores/user'
// import router from '@/router';


const formObject=ref({})
const userAvatar=ref('')
const form=ref({})
const uploadRef=ref()
const rules = {
  userName: [
    { required: true, message: "请输入昵称" },
    { min: 3, max: 5, message: "昵称长度需是3-15位" },
  ]
};
const userStore = useUserStore()
const getUserInformation=async()=>{
    const {data:{userId,avatar,userName,autograph,sex}}=await getUserInformationService(userStore.userId)
    formObject.value={userId,userName,autograph,sex}
    userAvatar.value=avatar
    console.log(formObject.value)
    console.log(avatar)
    // userStore.information.avatar=avatar
    
}
getUserInformation()

const onSubmit=async()=>{
  await form.value.validate(); //进行所有表单项验证
  const res=await updataBaseInformationService(formObject.value)
  ElMessage.success("基本信息修改成功");
  
  console.log(res)
  // 手动上传
  uploadRef.value.submit()
  userStore.information.value={}
  console.log(userStore.information.value)
  userStore.getInformation()
  
  // setTimeout(async () => {
  //     // 在这里编写需要延迟执行的代码
  //     router.go(0)
      
  //     ElMessage.success("头像修改成功");
      
  //   }, 1500); 
}

const pull=async ()=>{
  await userStore.getInformation()
  console.log('成功')
}

// const imgUrl = ref('')
const onSelectFile = (uploadFile) => {
  // 基于 FileReader 读取图片做预览
  const reader = new FileReader()
  reader.readAsDataURL(uploadFile.raw)
  reader.onload = () => {
    // imgUrl.value = reader.result
    userAvatar.value=reader.result
    // console.log(userAvatar.value)
  }
}
</script>

<template>
    <div>
        <el-form  :model="formObject" label-width="auto" style="max-width: 600px" :rules="rules" ref="form"> 
    <el-form-item label="头像">
      <el-upload
      name="avatarFile"
      ref="uploadRef"
      :on-success="pull"
      :auto-upload="false"
      class="avatar-uploader"
      :show-file-list="false"
      :on-change="onSelectFile"
      method="put"
      :headers="{'Authorization': userStore.token}"
      action="http://26.34.11.26:9000/yanzhi/user/update/avatar"
    >
      <img v-if="userAvatar!='default.jpg'" :src="userAvatar" class="avatar" />
      
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      <!-- <img :src="userAvatar" class="avatar" /> -->
    </el-upload>
    </el-form-item>
    <el-form-item prop="userName" label="昵称">
        <el-input v-model="formObject.userName" />
    </el-form-item>
    
    
    
    <el-form-item label="性别">
      <el-radio-group v-model="formObject.sex">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="个性签名">
      <el-input v-model="formObject.autograph" type="textarea" />
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="onSubmit">保存</el-button>
      
    </el-form-item>
  </el-form>
    </div>
</template>

<style scoped>
.avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
.avatar-uploader-icon{
  font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
}
</style>